npm run dev:h5<template>
  <!-- <s-layout
    title="首页"
    navbar="custom"
    tabbar="/pages/index/index"
	SAIL 搜索框封装属性
    :navbarStyle="template.style?.navbar"
  > -->
  <s-layout>
    <view class="container" v-if="isLogin">
      <form class="form">
        <p class="title">登录到【火灾风险评估预警】</p>
        <p class="title-2"></p>
        <p class="message" style="margin-top: 10rpx">
          立即登录，获得完整访问权限。
        </p>

        <!-- 账号输入 -->
        <fui-input
          label="账号"
          required
          placeholder="请输入账号"
          :style="{
            border: '1px solid rgba(105, 105, 105, 0.397)',
            borderRadius: '10px',
            marginTop: '30rpx',
            padding: '10px',
          }"
          v-model="loginForm.wx_user"
        >
          <text
            class="cicon-person-o"
            style="font-size: 32rpx; color: #666"
          ></text>
        </fui-input>

        <!-- 密码输入 -->
        <fui-input
          label="密码"
          required
          password
          placeholder="请输入密码"
          :style="{
            border: '1px solid rgba(105, 105, 105, 0.397)',
            borderRadius: '10px',
            marginTop: '20rpx',
            padding: '10px',
          }"
          v-model="loginForm.wx_pawd"
        >
          <text
            class="cicon-lock-o"
            style="font-size: 32rpx; color: #666"
          ></text>
        </fui-input>

        <!-- 行为验证码 range误差-->
        <fui-slide-verify
          :style="{ marginTop: '30rpx' }"
          @success="handleVerifySuccess"
          @fail="handleVerifyFail"
          :background="'rgba(65, 105, 225, 0.1)'"
          :activeBgColor="'royalblue'"
          :passColor="'royalblue'"
          range="100"
          :lineColor="'#FFB703'"
        >
        </fui-slide-verify>

        <button
          class="submit"
          :style="{
            marginTop: '30rpx',
            backgroundColor: submitDisabled ? '#ccc' : 'royalblue',
            border: 'none',
            outline: 'none',
            padding: '10px',
            borderRadius: '10px',
            color: '#fff',
            fontSize: '16px',
          }"
          :disabled="submitDisabled"
          @tap="handleLogin"
        >
          立即登录
        </button>

        <p class="signin" style="margin-top: 30rpx">
          没有账户？<a href="#">联系客服</a>
        </p>
      </form>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, reactive } from "vue";
import sheep from "@/sheep";
import { onLoad } from "@dcloudio/uni-app";

// 初始化用户登录状态
sheep.$store("user").isLogin = false;
const isLogin = ref(false);
// 登录表单
const loginForm = reactive({
  wx_user: "",
  wx_pawd: "",
  open_id: "",
});

onLoad(async (options) => {
   
  // 微信登录
  uni.login({
    provider: "weixin",
    success: (res) => {
      const params = {
        code: res.code,
      };

      // 设置超时时间
      const timeout = setTimeout(() => {
        uni.hideLoading();
        sheep.$helper.toast("请求超时，请重试");
      }, 10000); // 10秒超时

      // 调用登录接口
      sheep.$api.login
        .auth(params)
        .then((authRes) => {
          clearTimeout(timeout); // 清除超时计时器
          if (authRes.code == 200) {
            sheep.$store("user").isLogin = true;
            sheep.$store("user").userInfo = authRes.userInfo;
            console.log("用户信息:", authRes);
            if (authRes.status == 1) {
              // 根据用户类型跳转到不同页面
              switch (authRes.userInfo.wx_type) {
                case "1":
                  sheep.$store("app").template.basic.tabbar.list =
                    sheep.$store("app").template.basic.tabbar.qylist;
                  sheep.$router.go("/pages/qy/index", {}, { reLaunch: true });
                  break;
                case "2":
                  sheep.$store("app").template.basic.tabbar.list =
                    sheep.$store("app").template.basic.tabbar.xflist;
                  sheep.$router.go("/pages/xf/index", {}, { reLaunch: true });
                  break;
                case "3":
                  sheep.$store("app").template.basic.tabbar.list =
                    sheep.$store("app").template.basic.tabbar.otherlist;
                  sheep.$router.go("/pages/other/index",{},{ reLaunch: true });
                  break;
                default:
                sheep.$store("app").template.basic.tabbar.list =
                    sheep.$store("app").template.basic.tabbar.qylist;
                  sheep.$router.go("/pages/qy/index", {}, { reLaunch: true });
                  break;
              }
            } else {
              isLogin.value = true;
              // debug-登录
              loginForm.open_id = authRes.open_id;
              //loginForm.open_id = "aaaa";
            }
          } else {
            sheep.$helper.toast(authRes.message || "授权失败，请重试");
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    fail: (err) => {
      console.error("微信登录失败:", err);
      isLogin.value = true;
      loginForm.open_id = authRes.open_id;
      uni.hideLoading();
    },
  });
});

const submitDisabled = ref(true);

const handleVerifySuccess = () => {
  submitDisabled.value = false;
  uni.showToast({ title: "验证通过", icon: "none" });
};

const handleVerifyFail = () => {
  submitDisabled.value = true;
  uni.showToast({ title: "验证失败，请重试", icon: "none" });
};

const handleLogin = () => {
  if (!loginForm.wx_user || !loginForm.wx_pawd) {
    uni.showToast({ title: "请输入完整登录信息", icon: "none" });
    return;
  }
  // 这里添加实际登录逻辑
  showAuthModal();
};

const showAuthModal = () => {
  sheep.$api.login.login(loginForm).then((loginRes) => {
    // 处理登录成功逻辑
    if (loginRes.code == 200) {
      sheep.$store("user").userInfo = loginRes.userInfo;
      sheep.$store("user").isLogin = true;
      sheep.$helper.toast(loginRes.msg);
      console.log("用户信息:", loginRes);
      switch (loginRes.userInfo.wx_type) {
        case "1":
          sheep.$store("app").template.basic.tabbar.list =
            sheep.$store("app").template.basic.tabbar.qylist;
          sheep.$router.go("/pages/qy/index", {}, { reLaunch: true });
          break;
        case "2":
          sheep.$store("app").template.basic.tabbar.list =
            sheep.$store("app").template.basic.tabbar.xflist;
          sheep.$router.go("/pages/xf/index", {}, { reLaunch: true });
          break;
          case "3":
          sheep.$store("app").template.basic.tabbar.list =
            sheep.$store("app").template.basic.tabbar.otherlist;
          sheep.$router.go("/pages/other/index", {}, { reLaunch: true });
          break;
          default:
          sheep.$store("app").template.basic.tabbar.list =
            sheep.$store("app").template.basic.tabbar.otherlist;
          sheep.$router.go("/pages/xf/index", {}, { reLaunch: true });
          break;
      }
    }
  });
};
</script>

<!-- 保留原有样式 -->
<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  width: 100%;
}

/* From Uiverse.io by Yaya12085 */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  position: relative;
}

.title {
  font-size: 40rpx;
  color: royalblue;
  font-weight: 600;
  letter-spacing: -1px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 30px;
}

.title-2 {
  font-size: 40rpx;
  color: royalblue;
  font-weight: 600;
  align-items: center;
  padding-left: 20px;
}

.title::before,
.title::after {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  border-radius: 50%;
  left: 0px;
  background-color: royalblue;
}

.title::before {
  width: 18px;
  height: 18px;
  background-color: royalblue;
}

.title::after {
  width: 18px;
  height: 18px;
  animation: pulse 1s linear infinite;
}

.message,
.signin {
  color: rgba(88, 87, 87, 0.822);
  font-size: 14px;
}

.signin {
  text-align: center;
}

.signin a {
  color: royalblue;
}

.signin a:hover {
  text-decoration: underline royalblue;
}

.flex {
  display: flex;
  width: 100%;
  gap: 6px;
}

.form label {
  position: relative;
}

.form label .input {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 10px;
}

.form label .input + span {
  position: absolute;
  left: 10px;
  top: 15px;
  color: grey;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input:placeholder-shown + span {
  top: 15px;
  font-size: 0.9em;
}

.form label .input:focus + span,
.form label .input:valid + span {
  top: 30px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input:valid + span {
  color: green;
}

.submit {
  border: none;
  outline: none;
  background-color: royalblue;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  transform: 0.3s ease;
}

.submit:hover {
  background-color: rgb(56, 90, 194);
}

@keyframes pulse {
  from {
    transform: scale(0.9);
    opacity: 1;
  }

  to {
    transform: scale(1.8);
    opacity: 0;
  }
}

//
</style>
